<template>
	<!-- 运营系统-订单退款列表 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('playlet:paymentRefund:index')">
			<div class="d-flex j-sb" slot="header">
				<el-form class="d-flex b-s mt-2 mb-10" :inline="true" size="small" :model="dataForm"
					@keyup.enter.native="getTableList(true)" @submit.native.prevent>
					<el-form-item label="订单号">
						<el-input v-model="dataForm.order_id" placeholder="订单号" clearable />
					</el-form-item>
					<!-- <el-form-item label="补单订单号">
						<el-input v-model="dataForm.refund_order_id" placeholder="补单订单号" clearable />
					</el-form-item> -->
					<el-form-item prop="status" label="状态">
						<el-select clearable v-model="dataForm.status" placeholder="请选择">
							<el-option v-for="(item,index) in status" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary"
							@click="getTableList(true)">查询</el-button>
					</el-form-item>
				</el-form>
				<div class="d-flex">
					<vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getTableList,code:'query' }"></vxe-toolbar>
				</div>
			</div>
			<div class="d-flex h-100 b-s flex-column">
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-table ref="dataBackhaulSettingTable" key="dataBackhaulSettingTable" border height="100%" resizable size="medium"
							:loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
							:data="dataList" cell-class-name="py-10">
							<vxe-column width="100" field="id" title="ID" sortable align="center"></vxe-column>
							<vxe-column width="100" field="payment_id" title="订单ID" sortable align="center"></vxe-column>
							<vxe-column width="240" field="order_id" title="订单号" sortable align="center"></vxe-column>
							<!-- <vxe-column width="240" field="refund_order_id" title="补单订单号" sortable align="center"></vxe-column> -->
							<!-- <vxe-column width="120" field="amount" title="价格(元)" sortable align="center"></vxe-column> -->
							<vxe-column width="150" field="user_real_name" title="申请人员" align="center"
							:filters="user_real_name_filters" :filter-method="userrealFilterMethod"></vxe-column>
							<vxe-column width="150" field="handle_user_real_name" title="操作人员" align="center"
							:filters="handle_user_real_name_filters" :filter-method="handleuserFilterMethod"></vxe-column>
							<vxe-column width="130" field="status_name" title="状态" align="center">
								<template v-slot="{ row }">
									<div class="d-flex flex-row a-center j-center">
										<div class="d-flex font-weight" :class="row.status==1?'text-orange':row.status==2?'text-yellow':row.status==3?'text-success':row.status==4?'text-danger':'text-warning'" style="font-size: 17px;">{{row.status_name||''}}</div>
										<el-tooltip v-if="row.status==4" effect="dark" :content="row.refund_order_msg" placement="top">
											<!-- <i class="el-icon-info text-orangedeep pointer ml-2 font-md"></i> -->
											<d2-icon class="d-flex text-danger pointer ml-2" style="font-size: 19px;margin-top: 2px;" name="exclamation-circle"/>
										</el-tooltip>
									</div>
								</template>
							</vxe-column>
							<!-- <vxe-column width="240" field="refund_reason_name" title="退款原因" align="center"
							:filters="refund_reason_name_filters" :filter-method="refundFilterMethod"></vxe-column> -->
							<vxe-column width="180" field="created_at" title="创建时间" sortable cell-type="string" align="center"></vxe-column>
							<vxe-column width="180" field="updated_at" title="修改时间" sortable cell-type="string" align="center"></vxe-column>
							<vxe-column v-if="!tableLoading||(dataList.length&&$hasPermissionNum(['playlet:paymentRefund:refundOrder']))"
							title="操作" fixed="right" 
							:width="($hasPermissionNum(['playlet:paymentRefund:refundOrder']))*100" 
							align="center">
								<template v-slot="{ row }">
									<el-button size="small" round icon="el-icon-s-order"
									v-if="$hasPermission('playlet:paymentRefund:refundOrder')&&row.status==1"
									@click="submitHandle(row)" type="primary">补单</el-button>
								</template>
							</vxe-column>
							
							<template #empty>
								<div class="d-flex flex-row a-center j-center font-md">
									<div class="d-flex">
										暂时没有数据~
									</div>
								</div>
							</template>
						</vxe-table>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :pageSizes="[20,50,100,150,200]"
					:current-page="dataForm.page" :page-size="dataForm.pageSize" :total="total"  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
			<!-- 新增/修改弹窗 -->
			<playletBind-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDialog" @refreshDataList="getTableList"></playletBind-add-or-update>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	import mixinViewModule from '@/mixins/view-module'
	import PlayletBindAddOrUpdate from './playletBind-add-or-update'
	export default {
		mixins: [mixinViewModule],
		components: {
			PlayletBindAddOrUpdate
		},
		data() {
			return {
				tableLoading:false,
				total:0,
				status: [
					{
						value: 1,
						label: '待处理',
					},
					{
						value: 2,
						label: '处理中',
					},
					{
						value: 3,
						label: '补单成功',
					},
					{
						value: 4,
						label: '补单失败',
					}
				],
				refund_reason_name_filters:[],//退款理由筛选下拉框
				user_real_name_filters:[],//申请人员筛选下拉框
				handle_user_real_name_filters:[],//操作人员筛选下拉框
				// 增改
				addOrUpdateVisible: false,
				dataList:[],
				dataForm: {
					page:1,
					pageSize:20,
					order_id: '',
					refund_order_id:'',
					status:''
				}
			}
		},
		created() {
			if(this.$hasPermission('playlet:paymentRefund:index')){
				this.getTableList();
			}
		},
		methods: {
			async getTableList(init=false){
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/playlet/paymentSupplementary?'+this.$qs.stringify(this.dataForm))
				this.tableLoading = false;
				
				if(typeof tableRes == 'object' && tableRes !=null){
					this.total = tableRes.total;
					if(Array.isArray(tableRes.data)){
						let tablen = tableRes.data.length;
						if(tablen){
							this.dataList = tableRes.data;
							this.getfilterData('user_real_name');
							this.getfilterData('handle_user_real_name');
							this.getfilterData('refund_reason_name');
							return;
						}
					}
				}
				this.dataList = [];
			},
			//获取筛选下拉框数据
			getfilterData(field){
				this[field+'_filters'] = this.dataList.reduce((unique, current) => {
					const existing = unique.find(item => item.label === current[field]);
					if (!existing&&current[field]) {
						unique.push({
							value:current.id,
							label:current[field]
						});
					}
					return unique;
				}, []);
				console.log(this[field+'_filters']);
			},
			//申请人员筛选
			userrealFilterMethod({ option, row }){
				return row.user_real_name == option.label
			},
			//操作人员筛选
			handleuserFilterMethod({ option, row }){
				return row.handle_user_real_name == option.label
			},
			//退款原因筛选
			refundFilterMethod({ option, row }){
				return row.refund_reason_name == option.label
			},
			submitHandle(row){
				this.$confirm('是否申请补单?', '重要提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => { 
					this.$axios.get(`/api/playlet/paymentSupplementary/supplementaryOrder/${row.id}`).then(res => {
						this.$message({
							message: '申请补单成功！',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getTableList();
							}
						})
					});
				}).catch(err => {
					if (err == 'cancel') return;
					this.$message({
						message: '申请退款失败！',
						type: 'error',
						duration: 1500
					})
				});
			}
		}
	}
</script>

<style>

</style>